<template>
	<view>
		<view class="box">
			<h3><text style="margin-left: 5px;">{{line_json}}</text></h3>

			<p style="clear: both;">
				<view style="font-size: 18px;font-weight: 600;">车牌号：</view>
				<input placeholder="请输入车牌号" v-model="cars_Info_data.data.car_plate" type="text">
			</p>

			<p style="clear: both;">
				<view style="font-size: 18px;font-weight: 600;">手机号：</view>
				<input placeholder="请输入手机号" v-model="cars_Info_data.data.mobile" type="text">
			</p>

			<!-- 			<p>
				<view style="font-size: 18px;font-weight: 600;">验证码：</view>
				<input style="width: 60%;" placeholder="请输入验证码" v-model="smscode" type="text">
				<text @click="index_sendSms()"
					style="height: 50px;border-bottom: 1px solid #EEEEEE; padding-right: 20px;font-size: 18px;font-weight: 600;color: #1890FF;">{{s}}</text>
			</p> -->

			<p style="clear: both;" v-if="chakan">
				<view style="font-size: 18px;font-weight: 600;">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</view>
				<input placeholder="请输入姓名" v-model="cars_Info_data.data.name" type="text">
			</p>

			<!-- 			<view class="nns" v-if="chakan">
				<view class="mm">
					<p>身份证：</p>
					<image :src="cars_Info_data.data.card_img" mode=""></image>
				</view>
				<view class="mm">
					<p>驾驶证：</p>
					<image :src="cars_Info_data.data.drive_img" mode=""></image>
				</view>
				<view class="mm">
					<p>行驶证：</p>
					<image :src="cars_Info_data.data.license_img" mode=""></image>
				</view>
				<view class="mm">
					<p>运营证：</p>
					<image :src="cars_Info_data.data.operate_img" mode=""></image>
				</view>
				<view class="mm">
					<p>上岗证：</p>
					<image :src="cars_Info_data.data.work_img" mode=""></image>
				</view>
			</view> -->

			<br>

			<button @click="cars_Infof()" v-if="chakan==0">查看信息</button>
			<button @click="cars_confirm()" v-if="chakan==1">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cars_Info_data: null,
				json_line: [],
				s: "获取",
				car_id: "",
				smscode: "",
				chakan: 1,
				line_json: '',
			}
		},
		onLoad(open) {
			let json_line1 = JSON.parse(decodeURIComponent(open.json_line))
			this.json_line = json_line1
			this.car_id = open.id
			this.cars_Info(open.id) //车辆id
			// this.getLineJson()
		},
		methods: {
			getLineJson() {
				let line = this.json_line || [];
				line = JSON.parse(line)
				let line_arr = [];
				// 提取途径点
				line.map(function(currentValue, index, arr) {
					line_arr.push(currentValue.outlet_name || '');
				})
				this.line_json = line_arr.join('-');
			},
			//发送获取车辆信息
			cars_Infof(id) {
				let data = {
					id: this.car_id, //车浪id
					smscode: this.smscode, //验证码
					mobile: this.cars_Info_data.data.mobile //手机号
				}
				this.$rqt.cars_Info(data).then(res => {
					console.log(res);
					this.cars_Info_data = res;
					if (res.msg == "请求成功") {
						this.chakan = 1;
					}
				})
			},
			//扫码填过信息确认
			cars_confirm() {
				let data = {
					mobile: this.cars_Info_data.data.mobile, //手机号
					car_id: this.car_id
				}
				this.$rqt.cars_confirm(data).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 850
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 2, //返回层数，2则上上页
						})
					}, 850)
				})
			},
			//发送短信
			index_sendSms() {
				if (this.s == "获取") {
					this.s = 60;
					let data = {
						mobile: this.cars_Info_data.data.mobile
					}
					this.$rqt.index_sendSms(data).then(res => {
						console.log(res);
						this.time();
					})
				} else {

				}
			},
			time() {
				setTimeout(() => {
					this.s--;
					if (this.s == 0) {
						this.s = "获取";
					} else {
						this.time();
					}
				}, 1000)
			},

			//获取车辆信息
			cars_Info(id) {
				let data = {
					id: id
				}
				this.$rqt.cars_Info(data).then(res => {
					console.log(res);
					this.cars_Info_data = res;
				})
			}
		}
	}
</script>

<style scoped>
	button {
		margin: 0 auto;
		width: 86%;
		height: 50px;
		background: #1890FF;
		box-shadow: 0px 0px 4px 0px rgba(204, 204, 204, 0.5);
		border-radius: 25px;
		font-size: 18px;
		font-weight: 600;
		color: #FFFFFF;
		margin-top: 50px;
		margin-bottom: 30px;
	}

	.nns {
		width: 90%;
		margin: 0 auto;
		overflow: hidden;
	}

	.mm {
		width: 50%;
		float: left;
		margin-top: 10px;
	}

	.box {
		width: 100%;
		padding-bottom: 100px;
	}

	.mm>p {
		font-size: 18px;
		font-weight: 600;
	}

	.mm>image {
		width: 80px;
		height: 80px;
		margin-top: 10px;
	}

	.box>p {
		display: flex;
		line-height: 50px;
		width: 90%;
		margin: 0 auto;
	}

	.box>p>input {
		width: 70%;
		height: 50px;
		border-bottom: 1px solid #EEEEEE;
	}

	.box>h3 {
		text-align: center;
		margin-top: 25px;
	}
</style>